<template>
  <button :class="['lv-button',`lv-button--${type}`]">
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: "LvButton",

  props: {
    type: {
      type: String,
      default: "default",
      validator: value => {
        return (
          ["primary", "success", "info", "waring", "darger"].indexOf(value) > -1
        );
      }
    }
  }
};
</script>

<style>
.lv-button {
  height: 40px;
  padding: 12px 20px;
  font-size: 14px;
  color: #606266;
  border: 1px solid #dccfe6;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 1;
  outline: none;
  cursor: pointer;
}

.lv-button:focus,
.lv-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.lv-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

.lv-button--primary:focus,
.lv-button--primary:hover {
  color: #fff;
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>